<!-- 
<template>
    <div class="login-container">
        <div class="login-body">
            <span>欢迎~</span>
            <span>段氏集团官网</span>
        </div>
        <div class="login-right">
            <div class="user_account">
                <el-input v-model="loginFrom.user_account" placeholder="请输入用户名" prefix-icon="User"></el-input>
            </div>
            <div class="password">
                <el-input v-model="loginFrom.password" placeholder="请输入密码" prefix-icon="Lock" type="password"></el-input>
            </div>
            <div class="btn">
                <el-button size="large" @click="login" style="width: 220px; background-color: #626aef; color: #fff; font-weight: bold;">登录</el-button>
            </div>
            <div class="reg" @click="register" style="color: #1E90FF;" >还没有账号，点击注册</div>
        </div>
    </div>
</template> 
-->

<!-- <script>
    import axios from 'axios'
    import {ElMessage} from 'element-plus'
    export default {
        
        data() {
            return {
                loginFrom:{
                    user_account:'',
                    password:''
                },
                loginError:'',
            };
        },
        
        methods:{
            async login() {
                this.loginError = ''
                try {
                    const response = await axios.post('http://47.108.80.35:6060/user/login',this.loginFrom)
                    if(response.data.code === 200){
                        console.log("登录成功",response.data)
                        let userInfo = response.data.data
                        localStorage.setItem('userInfo',JSON.stringify(userInfo))
                        console.log(localStorage.getItem('userInfo'))
                        this.$router.push('/dscompany/index')
                    }else{
                        console.log("登录失败",response.data)
                        ElMessage.error(response.data.msg)
                        this.loginError = response.data.msg
                        console.log(this.loginError)
                    }
                } catch (error) {
                    ElMessage.error("请求失败")
                    console.log(error)
                }
            },
            register() {
                this.$router.push('/register')
            }
        }
    }
</script> -->

<!-- <style scoped>
    .login-container {
        width: 100vw;
        height: 100vh;
        background-image: url(../../assets/loginbg.jpg);
        background-size: cover; 
        background-position: center center; 
        background-repeat: no-repeat; 
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    } 
    .login-body {
        width: 20%;
        height: 40%;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: bold;
        background: linear-gradient(60deg, rgba(136, 209, 234, 0.80) 5%, rgba(215, 193, 187, 0.80) 100%);
        color: #fff;
        text-indent: 1rem;
        position: relative;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        border-radius: 2%;
        padding: 2rem;
    }
    .login-body span {
        margin-bottom: 1rem;
        font-size: 30px;
    }
    .login-right {
        width: 20%;
        height: 40%;
        background-color: rgba(255, 255, 255, 0.9);
        align-items: center;
        justify-content: center;
        position: relative;
        display: flex;
        border-radius: 2%;
        flex-direction: column;
        padding: 2rem;
    }
    .login-right .user_account, .password, .btn {
        padding: 0.5rem 0;
    }

    .error_Msg {
        color: red;
    }
</style> -->



<template>
    <div class="login-container">
        <div class="login-wrapper">
            <div class="login-body">
                <span>欢迎~</span>
                <span>科协社团官网</span>
            </div>
            <div class="login-right">
                <div class="user_account">
                    <el-input v-model="loginFrom.user_account" placeholder="请输入用户名" prefix-icon="User"></el-input>
                </div>
                <div class="password">
                    <el-input v-model="loginFrom.password" placeholder="请输入密码" prefix-icon="Lock" type="password"></el-input>
                </div>
                <div class="btn">
                    <el-button size="large" @click="login" class="login-button">登录</el-button>
                </div>
                <div class="reg" @click="register">还没有账号，点击注册</div>
            </div>
        </div>
        <!-- <p v-if="loginError" class="error_Msg">{{loginError}}</p> -->
    </div>
</template>

<script>
    import axios from 'axios'
    import {ElMessage} from 'element-plus'
    export default {
        
        data() {
            return {
                loginFrom:{
                    user_account:'',
                    password:''
                },
                loginError:'',
            };
        },
        
        methods:{
            async login() {
                this.loginError = ''
                try {
                    const response = await axios.post('http://47.108.80.35:6060/user/login',this.loginFrom)
                    if(response.data.code === 200){
                        console.log("登录成功",response.data)
                        let userInfo = response.data.data
                        localStorage.setItem('userInfo',JSON.stringify(userInfo))
                        console.log(localStorage.getItem('userInfo'))
                        this.$router.push('/dscompany/index')
                    }else{
                        console.log("登录失败",response.data)
                        ElMessage.error(response.data.msg)
                        this.loginError = response.data.msg
                        console.log(this.loginError)
                    }
                } catch (error) {
                    ElMessage.error("请求失败")
                    console.log(error)
                }
            },
            register() {
                this.$router.push('/register')
            }
        }
    }
</script>

<style scoped>
    .login-container {
        width: 100vw;
        height: 100vh;
        background-image: url(../../assets/loginbg.jpg);
        background-size: cover; 
        background-position: center center; 
        background-repeat: no-repeat; 
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        box-sizing: border-box;
    }
    
    .login-wrapper {
        display: flex;
        width: 90%;
        max-width: 800px;
        height: auto;
        min-height: 400px;
    }
    
    .login-body {
        width: 40%;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: bold;
        background: linear-gradient(60deg, rgba(136, 209, 234, 0.80) 5%, rgba(215, 193, 187, 0.80) 100%);
        color: #fff;
        text-indent: 1rem;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        border-radius: 10px 0 0 10px;
        padding: 2rem;
    }
    
    .login-body span {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    
    .login-right {
        width: 40%;
        background-color: rgba(255, 255, 255, 0.9);
        align-items: center;
        justify-content: center;
        display: flex;
        border-radius: 0 10px 10px 0;
        flex-direction: column;
        padding: 2rem;
    }
    
    .login-right .user_account, 
    .login-right .password, 
    .login-right .btn {
        width: 80%;
        padding: 0.5rem 0;
    }
    
    .login-button {
        width: 100%;
        /* max-width: 220px; */
        background-color: #626aef;
        color: #fff;
        font-weight: bold;
    }
    
    .reg {
        color: #1E90FF;
        cursor: pointer;
        margin-top: 1rem;
    }
    
    /* 平板设备 */
    @media (max-width: 768px) {
        .login-wrapper {
            flex-direction: column;
            width: 90%;
            max-width: 500px;
        }
        
        .login-body {
            width: 100%;
            border-radius: 10px 10px 0 0;
            font-size: 1rem;
            padding: 1.5rem;
        }
        
        .login-body span {
            font-size: 1.2rem;
        }
        
        .login-right {
            width: 100%;
            border-radius: 0 0 10px 10px;
            padding: 1.5rem;
        }
        
        .login-button {
            max-width: 100%;
        }
    }
    
    /* 手机设备 */
    @media (max-width: 480px) {
        .login-wrapper {
            width: 95%;
            max-width: none;
        }
        
        .login-body {
            font-size: 0.9rem;
            padding: 1rem;
        }
        
        .login-body span {
            font-size: 1rem;
        }
        
        .login-right {
            padding: 1rem;
        }
        
        .login-button {
            font-size: 0.9rem;
        }
    }
    
    .error_Msg {
        color: red;
        text-align: center;
        margin-top: 10px;
    }
</style>